CSS 变量
1. 什么是 CSS 变量？
CSS 变量（也称为自定义属性）是一种在 CSS 中定义和使用的变量。它们允许你存储和重用值，从而使你的 CSS 代码更加模块化和易于维护。CSS 变量的语法简单，使用灵活，可以在任何需要的地方引用。
1.1 为什么使用 CSS 变量？
- 可维护性：通过将常用的值（如颜色、字体大小等）存储在变量中，可以轻松地在整个样式表中重用这些值。
- 灵活性：变量可以在不同的上下文中使用，并且可以在运行时通过 JavaScript 动态修改。
- 一致性：确保在整个网站中使用一致的设计元素，减少样式不一致的问题。
2. CSS 变量的语法
CSS 变量的语法非常简单。变量名以两个连字符（--）开头，值可以是任何有效的 CSS 值。
2.1 定义变量
:root {
--primary-color: #4a90e2;
--font-size: 16px;
}
在上面的例子中，我们定义了两个变量：--primary-color 和 --font-size。这些变量可以在整个文档中使用。
2.2 使用变量
使用 var() 函数来引用变量。
body {
color: var(--primary-color);
font-size: var(--font-size);
}
在这个例子中，body 元素的文本颜色和字体大小分别使用了我们之前定义的变量。
3. 变量的作用域
CSS 变量具有作用域，这意味着它们只在定义它们的上下文中有效。
3.1 全局变量
在 :root 选择器中定义的变量是全局变量，可以在整个文档中使用。
:root {
--global-variable: 10px;
}
3.2 局部变量
你也可以在特定的选择器中定义局部变量，这些变量只在该选择器的范围内有效。
.container {
--local-variable: 20px;
padding: var(--local-variable);
}
在这个例子中，--local-variable 只在 .container 选择器中有效。
4. 变量的继承
CSS 变量可以继承，这意味着子元素可以继承父元素的变量值。
:root {
--text-color: #333;
}
body {
color: var(--text-color);
}
.highlight {
--text-color: #ff0000;
color: var(--text-color);
}
在这个例子中，.highlight 元素覆盖了 :root 中定义的 --text-color 变量，因此它的文本颜色为红色。
5. 动态修改变量
CSS 变量可以通过 JavaScript 动态修改，这使得它们非常灵活。
5.1 使用 JavaScript 修改变量
document.documentElement.style.setProperty('--primary-color', '#ff0000');
在这个例子中，我们将 --primary-color 变量的值修改为红色。
6. 实践练习
6.1 练习：创建一个主题切换系统
- 定义变量：在
:root中定义一些颜色变量。 - 使用变量：在样式表中使用这些变量来设置元素的颜色。
- 切换主题：使用 JavaScript 动态切换主题颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables Practice</title>
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>
</head>
<body>
<h1>CSS Variables Practice</h1>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function toggleTheme() {
const root = document.documentElement;
const bgColor = getComputedStyle(root).getPropertyValue('--bg-color');
const textColor = getComputedStyle(root).getPropertyValue('--text-color');
root.style.setProperty('--bg-color', bgColor === '#ffffff' ? '#000000' : '#ffffff');
root.style.setProperty('--text-color', textColor === '#000000' ? '#ffffff' : '#000000');
}
</script>
</body>
</html>
在这个练习中，我们创建了一个简单的主题切换系统，通过点击按钮可以切换页面的背景颜色和文本颜色。
7. 总结
CSS 变量是现代 CSS 中一个非常强大的工具，它们提供了灵活性、可维护性和一致性。通过定义和使用变量，你可以轻松地管理样式表中的常用值，并且可以通过 JavaScript 动态修改这些值。希望这篇教程能帮助你更好地理解和使用 CSS 变量。
8. 进一步学习
- CSS 预处理器：了解如何使用 Sass 或 Less 等预处理器来管理变量。
- CSS 框架：探索如何在使用 Bootstrap 或 Tailwind CSS 等框架时使用变量。
- CSS 调试工具：学习如何使用浏览器的开发者工具来调试和查看 CSS 变量。
通过不断实践和探索，你将能够更深入地掌握 CSS 变量的使用，并将其应用于实际项目中。